<template>
  <transition name="van-fade">
    <div v-if="show" class="c-choose-tag" :style="'top:' + paddingTop + 'px'">
      <van-nav-bar @click-left="doClose" title="选择标签" left-arrow />
      <div class="choose-head">
        <div class="title">
          <van-icon name="label" style="color:#fe5b53;" class="m-icon-tag" />
          已选标签 ({{ choosed.length }}/{{ limit }})
        </div>
        <div class="choosed-tag" v-if="choosed.length > 0">
          <div class="m-tag" v-for="t in choosed" :key="t" @click="rm(t)">
            {{ t }}
            <van-icon name="cross" class="close"></van-icon>
          </div>
        </div>
        <div class="describe" v-else>
          亲，添加标签除享受优先审核特权外，同时可获得更多经验值和积分。（最多可添加
          {{ limit }}
          个标签）
        </div>
      </div>
      <div class="divide">&nbsp;</div>
      <div class="choose-body">
        <van-tabs v-model="active" class="tabs" animated>
          <van-tab
            :title="c.text"
            v-for="c in tags"
            :key="c.text"
            :name="c.text"
          >
            <!-- <van-tag v-for="t in c.children" :key="t" plain>{{ t }}</van-tag> -->
            <div
              class="m-tag"
              :class="t.checked ? ' m-tag__active' : ''"
              v-for="t in c.children"
              :key="t.text"
              @click="choose(t)"
            >
              {{ t.text }}
            </div>
          </van-tab>
        </van-tabs>
      </div>
    </div>
  </transition>
</template>

<script>
export default {
  name: "choose-tag",
  props: ["close", "visiable", "change"],
  data() {
    return {
      tags: [
        {
          text: "角色",
          children: [
            { text: "学生", checked: false },
            { text: "老师", checked: false },
            { text: "白领", checked: false },
            { text: "护士", checked: false },
            { text: "良家", checked: false },
            { text: "公公", checked: false },
            { text: "少妇", checked: false },
            { text: "岳母", checked: false },
            { text: "医生", checked: false },
            { text: "阿姨", checked: false },
            { text: "服务生", checked: false },
            { text: "同事", checked: false },
            { text: "女主播", checked: false },
            { text: "网红", checked: false },
            { text: "空姐", checked: false },
            { text: "秘书", checked: false },
            { text: "银行职员", checked: false },
            { text: "公务员", checked: false },
            { text: "小姨子", checked: false },
            { text: "模特", checked: false },
            { text: "姐夫", checked: false }
          ]
        },
        {
          text: "身材",
          children: [
            { text: "贫胸", checked: false },
            { text: "肌肉男", checked: false },
            { text: "巨臀", checked: false },
            { text: "微胖", checked: false },
            { text: "丰满", checked: false },
            { text: "高挑", checked: false },
            { text: "苗条", checked: false },
            { text: "大屌", checked: false },
            { text: "巨乳", checked: false }
          ]
        },
        {
          text: "题材",
          children: [
            { text: "国产", checked: false },
            { text: "电影", checked: false },
            { text: "欧美", checked: false },
            { text: "日韩", checked: false }
          ]
        },
        {
          text: "剧情",
          children: [
            { text: "打电话", checked: false },
            { text: "约炮", checked: false },
            { text: "聚会", checked: false },
            { text: "3P", checked: false },
            { text: "群P", checked: false },
            { text: "车震", checked: false },
            { text: "公车", checked: false },
            { text: "外卖", checked: false },
            { text: "淫语", checked: false },
            { text: "秒射", checked: false },
            { text: "KTV", checked: false }
          ]
        },
        {
          text: "玩法",
          children: [
            { text: "颜射", checked: false },
            { text: "肛交", checked: false },
            { text: "玩具", checked: false },
            { text: "后入", checked: false },
            { text: "捆绑", checked: false },
            { text: "虐待", checked: false },
            { text: "自慰", checked: false },
            { text: "内射", checked: false },
            { text: "丝袜", checked: false },
            { text: "口交", checked: false }
          ]
        },
        {
          text: "来源",
          children: [
            { text: "偷拍", checked: false },
            { text: "转载", checked: false },
            { text: "街拍", checked: false },
            { text: "自拍", checked: false },
            { text: "原创", checked: false },
            { text: "曝光", checked: false }
          ]
        }
      ],
      choosed: [],
      active: 0,
      show: this.visiable,
      limit: 6
    };
  },
  watch: {
    visiable() {
      // console.log(this.visiable);
      this.show = this.visiable;
    }
  },
  methods: {
    doClose() {
      this.show = false;
      this.$emit("change", this.choosed);
      this.$emit("close");
    },
    rm(tag) {
      this.tags.map(e => {
        e.children.map(t => {
          if (t.checked && t.text == tag) {
            t.checked = false;
          }
        });
      });
      this.doChoose();
    },
    choose(item) {
      if (this.choosed.length >= this.limit) {
        this.$toast("最多选择" + this.limit + "个标签~");
        return;
      }
      item.checked = true;
      this.doChoose();
    },
    doChoose() {
      let arr = [];
      this.tags.map(e => {
        e.children.map(t => {
          if (t.checked) {
            arr.push(t.text);
          }
        });
      });
      this.choosed = arr;
    }
  },
  created() {
    this.paddingTop = window.sessionStorage.getItem("paddingTop");
  }
};
</script>

<style lang="less">
.c-choose-tag {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  background: #fff;
  .van-nav-bar__title {
    font-weight: bold;
  }
  .choose-head {
    font-size: 15px;
    .title {
      font-weight: bold;
      padding: 0 15px;
      padding-top: 15px;
    }
    .describe {
      color: #aaa;
      font-size: 14px;
      padding: 15px;
    }
    .choosed-tag {
      padding: 15px 0;
    }
  }
  .divide {
    background: #eee;
    height: 10px;
  }
  .choose-body {
    .tabs {
      .van-tab {
        flex-basis: 16.6% !important;
        font-weight: bold;
      }
      .van-tab--active {
        color: #fe5b53;
      }
      .van-tabs__line {
        width: 20px !important;
        height: 2px !important;
      }
      .van-tabs__content {
        // padding: 15px;
      }
    }
  }
  .m-tag {
    font-size: 14px;
    display: inline-block;
    padding: 2px 8px;
    border: 1px solid #eee;
    color: #333;
    margin-top: 10px;
    margin-left: 15px;
    border-radius: 15px;
    position: relative;
    .close {
      position: absolute;
      top: -5px;
      right: -2px;
      font-size: 10px;
      background: #efefef;
      border-radius: 50%;
      color: #fff;
    }
  }
  .m-tag__active {
    border: 1px solid #fe5b53;
    color: #fe5b53 !important;
  }
  .m-icon-tag {
    color: #fe5b53;
    vertical-align: middle;
    font-size: 16px;
  }
}
</style>
